import React from 'react';
import { useHotspots } from './hooks/useHotspots';
import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
import PageHeader from './components/PageHeader';
import PlatformSelector from './components/PlatformSelector';
import HotspotCard from './components/HotspotCard';
import { LoadingState, ErrorState, EmptyState } from './components/StateComponents';

function App() {
  const {
    hotspots,
    loading,
    error,
    selectedPlatform,
    handlePlatformChange,
    refreshData,
    lastRefreshTime
  } = useHotspots();

  // 键盘快捷键配置
  useKeyboardShortcuts({
    'r': refreshData, // R 键刷新
    'ctrl+r': refreshData, // Ctrl+R 刷新
    '1': () => handlePlatformChange('微博'), // 1 键切换到微博
    '2': () => handlePlatformChange('知乎'), // 2 键切换到知乎
    '3': () => handlePlatformChange('百度'), // 3 键切换到百度
  });

  if (loading) {
    return <LoadingState />;
  }

  if (error) {
    return <ErrorState error={error} onRetry={refreshData} />;
  }

  return (
    <div className="min-h-screen page-background" style={{display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%'}}>
      <PageHeader 
        onRefresh={refreshData}
        selectedPlatform={selectedPlatform}
        onPlatformChange={handlePlatformChange}
      />

      {/* 主容器 - 绝对居中 */}
      <div className="flex justify-center w-full" style={{display: 'flex', justifyContent: 'center', width: '100%', paddingLeft: 0, paddingRight: 0, marginLeft: 0, marginRight: 0}}>
        <div className="w-full max-w-4xl px-6 py-8" style={{width: '100%', maxWidth: '56rem', padding: '2rem 1.5rem', margin: '0 auto', boxSizing: 'border-box'}}>
          {/* 标题区域 - 仅保留平台特定信息 */}
          <div className="text-center mb-8" style={{textAlign: 'center', marginBottom: '2rem'}}>
            {/* 当前选中平台的热搜榜标题 */}
            <div className="mb-4">
              <h3 className="text-2xl md:text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                {selectedPlatform}热搜榜
              </h3>
            </div>

            <p className="text-gray-600 text-lg mb-4">
              <span className="inline-flex items-center justify-center space-x-2">
                <span>🔥</span>
                <span>实时追踪全网热点</span>
                <span>·</span>
                <span>📈</span>
                <span>掌握最新趋势</span>
              </span>
            </p>
            
            {/* 实时数据统计 - 一行内联显示 */}
            <div className="mt-6 flex items-center justify-center gap-4 max-w-4xl mx-auto bg-white/20 backdrop-blur-sm rounded-xl px-6 py-4 border border-white/30 shadow-lg">
              <span className="flex items-center gap-1">
                <span className="text-gray-200 text-sm">当前热搜</span>
                <span className="font-bold text-lg text-white">{hotspots?.length || 0}</span>
              </span>
              
              <span className="text-gray-300">|</span>
              
              <span className="flex items-center gap-1">
                <span className="text-gray-200 text-sm">最高热度</span>
                <span className="font-bold text-lg text-orange-300">
                  {hotspots ? Math.max(...hotspots.map(h => h.heat || 0)) : 0}°
                </span>
              </span>
              
              <span className="text-gray-300">|</span>
              
              <span className="flex items-center gap-1">
                <span className="text-gray-200 text-sm">总浏览量</span>
                <span className="font-bold text-lg text-blue-300">
                  {hotspots ? (hotspots.reduce((sum, h) => sum + (h.views || 0), 0) / 10000).toFixed(1) : 0}万
                </span>
              </span>
            </div>
          </div>

          {/* 热点列表 */}
          {!hotspots || hotspots.length === 0 ? (
            <div className="flex justify-center" style={{display: 'flex', justifyContent: 'center', width: '100%'}}>
              <EmptyState />
            </div>
          ) : (
            <div 
              className="space-y-3" 
              style={{
                display: 'flex', 
                flexDirection: 'column', 
                alignItems: 'center', 
                justifyContent: 'center',
                width: '100%', 
                maxWidth: '100%',
                gap: '0.75rem',
                margin: '0 auto',
                padding: '0',
                boxSizing: 'border-box'
              }}
            >
              {hotspots.slice(0, 10).map((hotspot, index) => (
                <React.Fragment key={hotspot.id}>
                  <div 
                    className="w-full transform transition-all duration-300 hover:scale-[1.02] animate-fade-in"
                    style={{ 
                      animationDelay: `${index * 0.1}s`,
                      width: '100%',
                      maxWidth: '100%',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      margin: '0 auto',
                      padding: '0',
                      boxSizing: 'border-box'
                    }}
                  >
                    <HotspotCard hotspot={{...hotspot, rank: index + 1}} />
                  </div>
                  
                  {/* 在第3和第6个卡片后添加分割区域 */}
                  {(index === 2 || index === 5) && (
                    <div className="w-full py-4 flex justify-center">
                      <div className="text-center bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20 max-w-md">
                        <div className="text-white/80 text-base font-semibold mb-1">
                          {index === 2 ? '🔥 热门TOP3' : '🎆 精彩推荐'}
                        </div>
                        <div className="text-white/60 text-xs">
                          {index === 2 ? 
                            '以上是当前最热门的三个话题' : 
                            '更多精彩内容继续看下去'}
                        </div>
                      </div>
                    </div>
                  )}
                </React.Fragment>
              ))}
            </div>
          )}

          {/* 底部统计信息 */}
          {hotspots && hotspots.length > 0 && (
            <div className="text-center mt-8" style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%'}}>
              {/* 数据来源说明 */}
              <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20 max-w-2xl mx-auto" style={{margin: '0 auto', maxWidth: '32rem'}}>
                <div className="text-white/80 text-sm space-y-2 text-center">
                  <div className="flex items-center justify-center gap-2 mb-3">
                    <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                    <span className="font-semibold">实时数据监控</span>
                  </div>
                  <p>数据来源：{selectedPlatform}官方API + 第三方数据接口</p>
                  <p>更新频率：每5分钟自动刷新 · 支持手动刷新</p>
                  <p className="text-white/90 text-sm font-semibold mt-3">
                    最后更新: {lastRefreshTime.toLocaleString('zh-CN', {
                      year: 'numeric',
                      month: 'long', 
                      day: 'numeric',
                      hour: '2-digit',
                      minute: '2-digit',
                      second: '2-digit'
                    })}
                  </p>
                  
                  {/* 快捷键提示 */}
                  <div className="text-xs text-white/70 flex flex-wrap justify-center gap-3 mt-4">
                    <span className="bg-white/20 px-3 py-2 rounded-lg backdrop-blur-sm border border-white/20 flex items-center gap-2">
                      <kbd className="bg-white/30 px-2 py-1 rounded text-xs font-mono">R</kbd>
                      <span>刷新数据</span>
                    </span>
                    <span className="bg-white/20 px-3 py-2 rounded-lg backdrop-blur-sm border border-white/20 flex items-center gap-2">
                      <kbd className="bg-white/30 px-2 py-1 rounded text-xs font-mono">1</kbd>
                      <span>微博</span>
                    </span>
                    <span className="bg-white/20 px-3 py-2 rounded-lg backdrop-blur-sm border border-white/20 flex items-center gap-2">
                      <kbd className="bg-white/30 px-2 py-1 rounded text-xs font-mono">2</kbd>
                      <span>知乎</span>
                    </span>
                    <span className="bg-white/20 px-3 py-2 rounded-lg backdrop-blur-sm border border-white/20 flex items-center gap-2">
                      <kbd className="bg-white/30 px-2 py-1 rounded text-xs font-mono">3</kbd>
                      <span>百度</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 页脚 */}
      <footer className="bg-white/10 backdrop-blur-sm border-t border-white/20 mt-16">
        <div className="flex justify-center w-full" style={{display: 'flex', justifyContent: 'center', width: '100%'}}>
          <div className="w-full max-w-4xl px-6 py-6" style={{width: '100%', maxWidth: '56rem', padding: '1.5rem'}}>
            <div className="text-center text-gray-700 space-y-2">
              <p className="text-lg font-semibold">🔥 实时热点追踪系统</p>
              <p className="text-sm opacity-80">全网热点一网打尽 · 数据实时更新</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;